﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据库ER图</title>
    <script src="../vendor/jquery-1.11.2.min.js"></script>
    <script src="../vendor/jquery-ui.min.js"></script>
    <script src="../vendor/jquery.jsPlumb-1.4.1-all-min.js"></script>
    <link rel="stylesheet" href="../css/ladder.css">
<style>
    input{
        height: 25px;;
    }
    .main,.HeadView,.LeftView{
        position: absolute;
    }
    .HeadView{
        height: 70px;
        left:200px;
        background-color: #f1f1f1;
        width: calc(100% - 200px);
    }
    .LeftView{
        width: 200px;;
        background-color: #D1DEEF;
        padding-top: 2px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .main{
        top:80px;
        left:200px;
        overflow: auto;
        width: calc(100% - 200px);
    }
    .item {
        border: 1px solid black;
        background-color: #ddddff;
        width: 100px;
        height: 100px;
        position: absolute;
        z-index: 100;
        border-radius: 2px;
        box-shadow: 2px 2px 19px #aaa;
        -webkit-transition: -webkit-box-shadow 0.15s ease-in;
        -moz-transition: -moz-box-shadow 0.15s ease-in;
        -o-transition: -o-box-shadow 0.15s ease-in;
        transition: box-shadow 0.15s ease-in;
    }
    .item:hover{
        box-shadow: 2px 2px 19px #444;
        -o-box-shadow: 2px 2px 19px #444;
        -webkit-box-shadow: 2px 2px 19px #444;
        -moz-box-shadow: 2px 2px 19px #444;
        opacity: 0.8;
    }

    .item .head{
        border-bottom: 2px solid #7b7b7b;
        text-align: center;
    }
    .item .row{
        padding: 2px;
    }
    .tableviews{
        border-top: 1px solid #ccc;
        padding-top: 5px;
    }
    .tableviews li{
        padding: 4px;
        border-bottom: 1px dotted #ccc;
        cursor: pointer;
    }
    .forms{
        padding: 2px;
        border-bottom: 1px solid #ccc;
    }
    .toolbars{
        padding:2px 0 2px 10px;
        line-height: 30px;
        cursor: pointer;
    }
    .toolbars span{
        margin-right: 5px;
    }
    .toolbars i{
        color: #0AA699;
        margin-right: 3px;
        font-weight: bold;
        font-size: 16px;;
    }
</style>
</head>
<body>
<div style="width: 100%;overflow: hidden;position: absolute" layoutH="0">
    <div class="HeadView">
        <div class="forms">
            分属名称<input id="sort">
            <button id="savebtn">保存</button>
        </div>
        <div class="toolbars">
            <span id="reloadbtn"><i class="iconfont">&#xe7ac;</i>重新加载</span>
            <span id="clearbtn"><i class="iconfont">&#xe78f;</i>清空</span>

        </div>

    </div>
    <div class="LeftView" layoutH="0">
        <div style="padding-bottom: 2px;text-align: center">模版名称:<input style="width: 140px" id="name"></div>
        <div class="tableviews">
            <ul>

            </ul>
        </div>


    </div>

    <div class="main" layoutH="0">



    </div>

</div>




<script src="../lib/require.js"></script>
<script>
    require(['ladder'],function(){
        Ladder.layout();

        var CurrentData={
            Container:$(".main"),
            ul:$(".tableviews ul"),
        };

        //连接线的基本配置
        var connectorPaintStyle = {
                    lineWidth: 4,
                    strokeStyle: "#61B7CF",
                    joinstyle: "round",
                    outlineColor: "white",
                    outlineWidth: 2
                },
                connectorHoverStyle = {
                    lineWidth: 4,
                    strokeStyle: "#216477",
                    outlineWidth: 2,
                    outlineColor: "white"
                },
                endpointHoverStyle = {
                    fillStyle: "#216477",
                    strokeStyle: "#216477"
                },
                sourceEndpoint = {
                    endpoint: "Rectangle",
                    paintStyle: {
                        strokeStyle: "#7AB",
                        fillStyle: "transparent",
                        radius: 2,
                        lineWidth: 4
                    },
                    isSource: true,
                    connector: [ "Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true } ],
                    connectorStyle: connectorPaintStyle,
                    hoverPaintStyle: endpointHoverStyle,
                    connectorHoverStyle: connectorHoverStyle,
                    dragOptions: {},
                    overlays: [
                        [ "Label", {
                            location: [0.5, 1.5],
                            cssClass: "endpointSourceLabel",
                            visible:false
                        } ]
                    ]
                },
                targetEndpoint = {
                    endpoint: "Dot",
                    paintStyle: { fillStyle: "#7AB02C", radius: 11 },
                    hoverPaintStyle: endpointHoverStyle,
                    maxConnections: -1,
                    dropOptions: { hoverClass: "hover", activeClass: "active" },
                    isTarget: true,

                },
                init = function (connection) {
                    connection.getOverlay("label").setLabel(connection.sourceId.substring(15) + "-" + connection.targetId.substring(15));
                };

        CurrentData.sort = Ladder.getRequestParam("sort");
        if(CurrentData.sort){
            loadData();
        }

        jsPlumb.ready(function () {
            jsPlumb.importDefaults({
                DragOptions : { cursor: 'pointer', zIndex:0 },
                PaintStyle : { strokeStyle:'#0ff' },
                EndpointStyle : { width:16, height:16, strokeStyle:'#0ff' },
                Endpoint : "Rectangle",
                Anchors : ["BottomCenter"],
                //控制是否有箭头
                ConnectionOverlays: [
                    [ "Arrow", { location:0.8} ],
                    [ "Label", {
                        location: 0.1,
                        id: "label",
                        cssClass: "aLabel"
                    }]
                ]
            });
            var basicType = {
                connector: "StateMachine",
                paintStyle: { strokeStyle: "#000", lineWidth: 4 },
                hoverPaintStyle: { strokeStyle: "blue" },
                overlays: [ "Arrow"]
            };
            jsPlumb.registerConnectionType("basic", basicType);
        });

        function loadData(sort){
            webajax(URLS.GetData,{tableName:"DataModel",condition:{sort:(sort?sort:CurrentData.sort)}},function(result){
                if(result.statusCode==200){
                    var width=CurrentData.Container.width();
                    var num=Math.floor((width-132)/200)+1;
                    var rn=1;
                    result.data.forEach(function(item,index){
                        var $item=$('<div id="'+item.name+'" class="item"></div>');
                        CurrentData.Container.append($item);
                        $("<div class='head'>"+item.title+"</div>").appendTo($item);
                        $("<div class='row'>类型:"+item.type+"</div>").appendTo($item);
                        $("<div class='row'>字段:"+Ladder.toJSON(item.columns).length+"个</div>").appendTo($item);
                        $("<div class='row'>连接:"+(item.conn?item.conn:"<默认>")+"</div>").appendTo($item);
                        CurrentData.ul.append("<li>["+item.type+"]"+item.name+"</li>")
                        $item.css({
                            "left":16+(101* (rn%2))+200*(index%num),
                            "top":32+110*(rn-1)
                        });
                        if(index>0&&index%num==0)rn++;
                        setTimeout(function(){
                            jsPlumb.addEndpoint(item.name,{ anchor:"RightMiddle" },sourceEndpoint);
                            jsPlumb.addEndpoint(item.name,{ anchor:"LeftMiddle" },targetEndpoint);
                            jsPlumb.addEndpoint(item.name,{ anchor:"TopCenter" },targetEndpoint);
                            jsPlumb.addEndpoint(item.name,sourceEndpoint);
                        },1000);

                    });


                    jsPlumb.draggable($(".item"));
//                var connects = Ladder.getStore("connects");
//                connects.forEach(function(item){
//                    jsPlumb.connect({source:item.source,target:item.target},sourceEndpoint);
//                });
                }
            });
        }
        $("#savebtn").click(function(){
            var list=jsPlumb.getAllConnections();//获取所有的链接
            var connects=[];
            for(var i in list){
                for(var j in list[i]){
                    connects.push({
                        source:list[i][j]['sourceId'],
                        target:list[i][j]['targetId']
                    })
                }
            }
//            Ladder.setStore("connects",connects);
        });

        $("#clearbtn").click(function(){
            CurrentData.Container.empty();
            CurrentData.ul.empty();
        });
        $("#reloadbtn").click(function(){
            CurrentData.Container.empty();
            CurrentData.ul.empty();
            loadData($("#sort").val());
        });
    });
</script>









</body>
</html>